<template>
  <div class="page-container-padding">
    <!-- 日期查询器 -->
    <span>
      <el-date-picker
        v-model="queryDate"
        :clearable="false"
        placeholder="查询日期"
        size="mini"
        style="width: 130px; margin-left: 5px"
      ></el-date-picker>
    </span>
    <span style="margin-left: 5px">
      <el-select
        v-model="currentBlock"
        size="mini"
        style="width: 130px"
        @change="resetTableData"
      >
        <el-option value="全部板块" label="全部板块"></el-option>
        <el-option value="农产品" label="农产品"></el-option>
        <el-option value="化工品" label="化工品"></el-option>
        <el-option value="黑色系" label="黑色系"></el-option>
      </el-select>
    </span>
    <span style="margin-left: 5px">
      <el-select
        v-model="currentFine"
        size="mini"
        style="width: 130px"
        @change="resetTableData"
      >
        <el-option value="全部库存" label="全部库存"></el-option>
        <el-option value="重点库存" label="重点库存"></el-option>
      </el-select>
    </span>
    <span style="margin-left: 5px">
      <el-button
        type="primary"
        size="mini"
        :loading="queryLoading"
        @click="toQueryStock"
      >
        查询
      </el-button>
    </span>
    <div style="margin-top: 10px">
      <el-table
        :border="true"
        :stripe="true"
        :data="tableData"
        :span-method="varietySpanMethod"
        :header-row-class-name="'table-header'"
      >
        <el-table-column prop="block_name" label="板块" width="66px">
          <template slot-scope="scope">
            <span style="color: #3268bd; font-weight: 700; font-size: 14px">
              {{ scope.row.block_name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="variety_name" label="品种" width="80px">
          <template slot-scope="scope">
            <span style="color: #b43c3c; font-weight: 700; font-size: 14px">
              {{ scope.row.variety_name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="stock_name"
          label="库存名称"
          width="175px"
        ></el-table-column>
        <el-table-column
          prop="date_latest"
          label="最新日期"
          width="95px"
        ></el-table-column>
        <el-table-column
          prop="stock_unit"
          label="单位"
          width="70px"
        ></el-table-column>
        <el-table-column
          prop="stock_latest"
          label="最新库存"
          width="110px"
        ></el-table-column>
        <el-table-column
          prop="ring_rate"
          label="环比"
          width="90px"
        ></el-table-column>
        <el-table-column
          prop="same_rate1"
          label="去年同比"
          width="90px"
        ></el-table-column>
        <el-table-column
          prop="same_rate2"
          label="前年同比"
          width="90px"
        ></el-table-column>
        <el-table-column
          prop="highest1"
          label="近1月高点"
          width="110px"
        ></el-table-column>
        <el-table-column
          prop="highest2"
          label="近3月高点"
          width="110px"
        ></el-table-column>
        <el-table-column
          prop="highest3"
          label="近6月高点"
          width="110px"
        ></el-table-column>
        <el-table-column
          prop="highest0"
          label="历史高点"
          width="110px"
        ></el-table-column>
        <el-table-column
          prop="lowest0"
          label="历史低点"
          width="110px"
        ></el-table-column>
        <el-table-column prop="c_level" label="百分位" width="100px">
          <template slot-scope="scope">
            <el-progress
              :text-inside="true"
              :stroke-width="16"
              :percentage="scope.row.c_level"
              :color="customColors"
            ></el-progress>
          </template>
        </el-table-column>
        <el-table-column
          prop="frequency"
          label="频率"
          width="50px"
        ></el-table-column>
        <el-table-column
          prop="value_start"
          label="数据起始"
          width="80px"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
  import { getCommodityStock } from '@/api/analysisData/stock'
  import { datetimeToStr } from '@/utils/datetimeUtils'
  export default {
    data() {
      return {
        queryDate: new Date(),
        currentBlock: '全部板块',
        currentFine: '全部库存',
        queryLoading: false,
        tableData: [],
        stockList: [],
        spanArr: [],
        pos: 0,
        blockSpanArr: [],
        blockPos: 0,
        customColors: [
          { color: '#7c7d7e', percentage: 3 },
          { color: '#a9c92a', percentage: 20 },
          { color: '#2ad582', percentage: 40 },
          { color: '#3268bd', percentage: 60 },
          { color: '#ab3ad7', percentage: 80 },
          { color: '#fc4c2a', percentage: 95 },
          { color: '#fe2517', percentage: 100 },
        ],
      }
    },
    mounted() {
      this.toQueryStock()
    },
    methods: {
      toQueryStock() {
        this.queryLoading = true
        const params = {
          date: datetimeToStr(this.queryDate, true, ''),
        }
        getCommodityStock(params).then((res) => {
          this.stockList = res.data
          this.resetTableData()
          this.queryLoading = false
        })
      },

      // 根据条件重新渲染数据
      resetTableData() {
        let showList = this.stockList
        if (this.currentFine !== '全部库存') {
          showList = showList.filter((item) => {
            return item.is_fine === 1
          })
        }
        if (this.currentBlock !== '全部板块') {
          showList = showList.filter((item) => {
            return item.block_name === this.currentBlock
          })
        }
        this.tableData = []
        this.tableData = showList
        this.getSpanArr(this.tableData)
      },

      getSpanArr(data) {
        // data就是我们从后台拿到的数据
        this.spanArr = []
        this.pos = 0
        this.blockSpanArr = []
        this.blockPos = 0
        for (let i = 0; i < data.length; i++) {
          if (i === 0) {
            this.spanArr.push(1)
            this.pos = 0
            this.blockSpanArr.push(1)
            this.blockPos = 0
          } else {
            // 判断当前元素与上一个元素是否相同
            if (data[i].variety_name === data[i - 1].variety_name) {
              this.spanArr[this.pos] += 1
              this.spanArr.push(0)
            } else {
              this.spanArr.push(1)
              this.pos = i
            }

            if (data[i].block_name === data[i - 1].block_name) {
              this.blockSpanArr[this.blockPos] += 1
              this.blockSpanArr.push(0)
            } else {
              this.blockSpanArr.push(1)
              this.blockPos = i
            }
          }
          // console.log(this.spanArr)
        }
      },

      varietySpanMethod({ row, column, rowIndex, columnIndex }) {
        if (columnIndex === 1) {
          const _row = this.spanArr[rowIndex]
          const _col = _row > 0 ? 1 : 0
          // console.log(`rowspan:${_row} colspan:${_col}`)
          return {
            // [0,0] 表示这一行不显示， [2,1]表示行的合并数
            rowspan: _row,
            colspan: _col,
          }
        }
        if (columnIndex === 0) {
          const b_row = this.blockSpanArr[rowIndex]
          const b_col = b_row > 0 ? 1 : 0
          return {
            rowspan: b_row,
            colspan: b_col,
          }
        }
      },
    },
  }
</script>
<style scoped lang="scss">
  .el-table ::v-deep .table-header {
    color: #023ec2;
  }
</style>
